import Vue from 'vue'
import { debounce } from 'lodash'
import { Lazyload } from 'mint-ui'

import 'swiper/dist/css/swiper.css'
import './style/putao.styl'

import './api'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'

import mixin from './mixin/global'
import filter from './filter'

Vue.mixin(mixin)
Vue.use(filter)
Vue.use(Lazyload)

require('babel-polyfill')
require('default-passive-events')

if (!window.Promise) {
  window.Promise = require('es6-promise').Promise
}

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
(() => {
  const doc = window.document
  let first = true
  const adjustBase = () => {
    let { clientWidth } = doc.body
    if (first && !/mobile/i.test(navigator.userAgent)) {
      // 如果页面有纵向滚动条，会占去clientWidth的空间，极端情况下会导致页面布局混乱，故减去滚动条宽度 15
      clientWidth -= 15
      first = false
    }
    doc.querySelector('html').style['font-size'] = `${Math.min(100, clientWidth / 10) * 1.25}px`
  }
  adjustBase()
  window.onresize = debounce(adjustBase, 150)

  // 1px检测
  if (window.devicePixelRatio && devicePixelRatio >= 2) {
    const testElem = doc.createElement('div')
    testElem.style.border = '.5px solid transparent'
    doc.body.appendChild(testElem)
    if (testElem.offsetHeight === 1) {
      doc.querySelector('html').classList.add('hairline')
    }
    doc.body.removeChild(testElem)
  }
})()
